<template>
    <div>
        <div class="mb">
            <div class="list" v-for="(item, index) in contents" :key="index">
                <div class="d-flex w-100 justify-content-between">
                    <h5 class="mb-1">{{item.title}}</h5>
                    <small>{{item.created_at || "2019-04-15"}}</small>
                </div>
                <p class="mb-1">
                    {{item.content}}
                </p>
                <footer class="text-right">
                    <small @click="like(item.id)">赞（{{item.like_count}}）</small>
                    <small>回复（{{item.comment_count}}）</small>
                    <a href="">我要回复</a>
                </footer>
            </div>
        </div>
        <!-- 分页 -->
        <div class="mb">
            <ul class="pagination mb">
                <li class="page-item" :class="{disabled: curPage === 1}">
                    <span class="page-link" @click="getData(curPage-1)"> &lt; </span>
                </li>
                <li v-for="(item, index) in pages" :key="index" class="page-item" :class="{'active': curPage === item}"
                    @click="getData(item)">
                    <span class="page-link" href="#">{{item}}</span>
                </li>
                <li class="page-item" :class="{disabled: curPage === pages}">
                    <span class="page-link" @click="getData(curPage+1)"> &gt; </span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import axios from 'axios';
    import qs from 'qs'
    export default {
        data() {
            return {
                count: 0, // 总条数
                pages: 1, // 总页数
                prepage: 2, // 每页多少条
                curPage: 1, // 当前页
                contents: []
            }
        },
        created() {
            this.getData();
        },
        methods: {
            getData(page) {
                // 把this.page控制在1-this.page之间
                this.curPage = Math.max(1, this.curPage);
                this.curPage = Math.min(this.pages, this.curPage);
                // 连续点击当前页，不发请求
                if (page === this.curPage) return;
                this.curPage = page || this.curPage;

                // 代理会把左边请求转发到 `http:127.0.0.1:80/` 去
                // 完整url：http://127.0.0.1:8081/api/
                this.$ajax({
                    method: 'get',
                    // url: '/api/',
                    url: '/',                 
                    params: {
                        page: this.curPage,
                    }
                }).then(res => {
                    if (!res.code) {
                        console.log(res);
                        this.count = res.data.count;
                        this.prepage = res.data.prepage;
                        this.pages = Math.ceil(this.count / this.prepage);
                        this.contents = res.data.data;
                    }
                });
            },
            like(contentId) {
                let data = {
                    content_id: contentId,
                };
                this.$ajax({
                    method: 'POST',
                    // url: '/api/like',
                    url: '/like',
                    data: qs.stringify(data),
                }).then(res => {
                    let { data } = res;
                    // 点赞成功
                    if (!data.code) {
                        this.contents.forEach(content => {
                            if (content.id == data.data.id) {
                                content.like_count = data.data.like_count;
                            }
                        });
                    } else {
                        alert(data.data);
                    }
                });
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>